<!-- 商家推荐组件 -->
<template>
  <view class="shop-recommend">
    <view class="title">{{$t('alipay.recommend')}}</view>
    <scroll-view scroll-x="true" class="recommend-list">
      <view
        class="recommend-item"
        v-for="(item, index) in recommendList"
        :key="index"
        @click="handleGoodItem(item)"
      >
        <image class="recommend-item-banner" :src="item.goods_pic" mode="aspectFill" />
        <view class="recommend-item-name">{{ item.name }}</view>
		<view class="old-price">￥{{ item.original_price }}</view>
        <view class="price-section">
          <view class="price-info">
            <view class="new-price">
              <text>￥</text>
              <text>{{ item.price }}</text>
            </view>
          </view>
          <view class="add-buy" @click.stop="addBuy(item)">
            <image
              :src="asyncImgs.alipay.white_add_icon"
              mode=""
            />
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    recommendList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    addBuy(item) {
      item = { stamp: `recommend-${item.id}`, ...item };

      if (!item?.num) {
        item["num"] = 1;
      } else {
        item.num++;
      }
      this.$emit("recommendAddBuy", { item });
    },
    handleGoodItem(item) {
      item["stamp"] = `recommend-${item.id}`;
      this.$utils.toUrl(
        `/alipay-order/goods/goods?info=${JSON.stringify(item)}`
      );
    },
  },
};
</script>

<style lang="less" scoped>
.shop-recommend {
  width: 100%;
  margin-top: 3.73vw;
  .title {
    font-size: 3.73vw;
    font-weight: 600;
    color: #191919;
    padding-left: 3.2vw;
  }
  .recommend-list {
    width: 100%;
    padding: 0 3.2vw 4.27vw 3.2vw;
    margin-top: 2.13vw;
    display: flex;
    flex-wrap: nowrap;
    .recommend-item {
      width: 29.07vw;
      margin-right: 3.2vw;
      flex-shrink: 0;
      .recommend-item-banner {
        width: 29.07vw;
        height: 29.07vw;
        background: #f9f9f9;
        border-radius: 2.13vw;
      }
      .recommend-item-name {
        max-width: 29.07vw;
        font-size: 3.73vw;
        font-weight: 600;
        color: #191919;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 1.33vw;
      }
      .price-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.5vw;
        .price-info {
          display: flex;
          align-items: baseline;
          .new-price {
            font-size: 4.27vw;
            font-weight: 600;
            color: #fd4b32;
            text:first-child {
              font-size: 2.93vw;
            }
          }
        }

        .add-buy {
          width: 5.87vw;
          height: 5.87vw;
          background: #1fb6fd;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          image {
            width: 5vw;
            height: 5vw;
            background-size: 100%;
            display: block;
          }
        }
      }
	  .old-price {
	    font-size: 2.93vw;
	    font-weight: 400;
	    color: #999999;
		margin-top: 1.5vw;
	    text-decoration: line-through;
	  }
    }
    .recommend-item:last-child {
      margin-right: 0;
    }
  }
}
</style>
